<template>
  <div v-if="showView" className="itemized-energy-consumption-chart-container">
    <div className="itemized-energy-consumption-chart-view" id="use-energy-pie-charts-id"></div>
  </div>
  <div v-else className="noData">
    <p><img src="../../../assets/nodata.png"></p>
    <p>暂无数据</p>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {ref, onMounted, onBeforeUnmount} from 'vue';
import _ from "underscore";

export default {
  setup() {
    let showView=ref(true);
    let waterEleRateChart = null;
    // 初始化图表
    const initChart = () => {
      const chartDom = document.getElementById('use-energy-pie-charts-id');
      waterEleRateChart = echarts.init(chartDom);

    };
    const setData = (data) => {
      showView.value = true;
      if (!data||data.length==0) {
        showView.value = false;
        return;
      }
      let numCount=0;
      _.forEach(data,function (item){
        numCount+=item.value;
      })
      console.log(numCount);
      setTimeout(function (){
        initChart();
        const option = {
          title: [
            {
              text: '合计',
              subtext: numCount,
              textStyle: {
                fontSize: 18,
                color: "#dadada"
              },
              subtextStyle: {
                fontSize: 16,
                color: "#dadada"
              },
              textAlign: "center",
              x: '34.5%',
              y: '40%',
            }],
          tooltip: {
            trigger: 'item',
          },
          legend: {
            type: "scroll",
            orient: 'vertical',
            left: '70%',
            align: 'left',
            top: 'middle',
            textStyle: {
              color: '#8C8C8C'
            },
            height: 233
          },
          series: [
            {
              type: 'pie',
              center: ['35%', '50%'],
              radius: ['40%', '65%'],
              clockwise: false, //饼图的扇区是否是顺时针排布
              avoidLabelOverlap: false,
              color:["#4e6de0", "#b688dc", "#81c4c7", "#00cc99", "#0066ff", "#db2365"],
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                  },
                  labelLine: {
                    length: 5,
                    length2: 3,
                    show: true,
                    color: '#00ffff'
                  }
                }
              },
              data: data
            }
          ]
        };
        waterEleRateChart.setOption(option, true);
      },100)


    }
    onBeforeUnmount(() => {
      if (waterEleRateChart) {
        waterEleRateChart.dispose();
      }
    });

    return {
      setData,
      showView
    };
  }
};
</script>

<style scoped>
.itemized-energy-consumption-chart-container {
  width: 100%;
  height: 300px;
}

.itemized-energy-consumption-chart-view {
  width: 100%;
  height: 300px;
}
</style>
